:root {
        color: #eef6ff;
        color-scheme: dark;
        --mail-iseng-font-body:
          "Manrope", "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
        --mail-iseng-font-display:
          "Manrope", "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
        --mail-iseng-font-mono:
          "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
        --mail-iseng-bg-base: #06101d;
        --mail-iseng-bg-shell:
          linear-gradient(180deg, #0d1828 0%, #06101d 54%, #030814 100%);
        --mail-iseng-bg-orbs:
          radial-gradient(circle at 50% 34%, rgba(77, 162, 255, 0.16) 0%, rgba(55, 215, 255, 0.06) 24%, transparent 58%);
        --mail-iseng-bg-orb-position:
          50% 34%;
        --mail-iseng-bg-orb-size:
          74% 74%;
        --mail-iseng-bg-texture:
          none;
        --mail-iseng-bg-texture-size:
          auto;
        --mail-iseng-bg-texture-position:
          center;
        background:
          var(--mail-iseng-bg-shell);
        font-family: var(--mail-iseng-font-body);
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-width: 320px;
        min-height: 100vh;
        overflow: hidden;
      }

      body {
        color: #f7fbff;
      }

      body::before {
        position: fixed;
        inset: 0;
        z-index: -2;
        background: var(--mail-iseng-bg-orbs);
        background-position: var(--mail-iseng-bg-orb-position);
        background-size: var(--mail-iseng-bg-orb-size);
        background-repeat: no-repeat;
        filter: blur(110px) saturate(1.01);
        opacity: 0.22;
        content: "";
      }

      body::after {
        display: none;
      }

      html.app-booting #root *,
      html.app-booting #root *::before,
      html.app-booting #root *::after {
        animation: none !important;
        transition: none !important;
      }

      #root {
        height: 100svh;
        height: 100dvh;
        overflow: hidden;
        opacity: 1;
        transform: none;
        filter: none;
        will-change: opacity;
        backface-visibility: hidden;
      }

      html.app-booting #root {
        background: var(--mail-iseng-bg-shell);
      }

      #mail-iseng-boot-loader {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: none;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        isolation: isolate;
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transform: none;
        will-change: opacity;
      }

      #mail-iseng-boot-loader::before,
      #mail-iseng-boot-loader::after {
        display: none;
        content: "";
      }

      .mail-iseng-boot-bg-orbs,
      .mail-iseng-boot-bg-texture {
        position: fixed;
        inset: 0;
        pointer-events: none;
      }

      .mail-iseng-boot-bg-orbs {
        z-index: 0;
        background: var(--mail-iseng-bg-orbs);
        background-position: var(--mail-iseng-bg-orb-position);
        background-size: var(--mail-iseng-bg-orb-size);
        background-repeat: no-repeat;
        filter: blur(110px) saturate(1.01);
        opacity: 0.22;
      }

      .mail-iseng-boot-bg-texture {
        display: none;
      }

      /* === Circular Spinner Indicator === */

      .mail-iseng-boot-indicator {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        transform: translate3d(0, 0, 0);
        transform-origin: center;
        will-change: transform, opacity, filter;
      }

      .mail-iseng-boot-head {
        display: none;
      }

      .mail-iseng-boot-kicker {
        display: none;
      }

      .mail-iseng-boot-title {
        display: none;
      }

      .mail-iseng-boot-body {
        display: none;
      }

      .mail-iseng-boot-progress-row {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
      }

      /* Spinning ring track + arc */
      .mail-iseng-boot-progress {
        position: absolute;
        inset: 0;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        border: 3.5px solid rgba(255, 255, 255, 0.08);
        border-top-color: rgba(255, 255, 255, 0.9);
        border-right-color: rgba(140, 200, 255, 0.35);
        background: none;
        box-shadow:
          0 0 18px rgba(77, 162, 255, 0.08),
          inset 0 0 12px rgba(77, 162, 255, 0.04);
        overflow: hidden;
        animation: mail-iseng-boot-spin 1.1s linear infinite;
      }

      .mail-iseng-boot-progress::after {
        display: none;
      }

      /* Hide the fill bar — no longer needed for circular */
      .mail-iseng-boot-progress-fill {
        display: none !important;
      }

      /* Percentage label in center of ring */
      .mail-iseng-boot-progress-meta {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        pointer-events: none;
      }

      .mail-iseng-boot-progress-label {
        color: rgba(255, 255, 255, 0.82);
        font-family: var(--mail-iseng-font-mono);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1;
        text-align: center;
      }

      /* Hide message text inside the ring — show below via pseudo or just hide */
      #mail-iseng-boot-message {
        position: absolute;
        top: calc(100% + 18px);
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.7rem;
        font-weight: 400;
        color: rgba(210, 229, 251, 0.42);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0.01em;
        transition: opacity 180ms ease;
      }

      /* Spin keyframes */
      @keyframes mail-iseng-boot-spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      /* === State: Loading === */

      html.app-loading #mail-iseng-boot-loader {
        display: flex;
        opacity: 1;
        transform: none;
      }

      html.app-loading.app-warm-start #mail-iseng-boot-loader {
        opacity: 0.92;
      }

      /* === State: Loaded (exit) === */

      html.app-loaded #mail-iseng-boot-loader {
        opacity: 0;
        transform: none;
        filter: none;
      }

      html.app-loading #root {
        visibility: visible;
        opacity: 0;
        pointer-events: none;
        transform: none;
        filter: none;
      }

      html.app-loading.app-warm-start #root {
        opacity: 0.16;
        transform: none;
        filter: none;
      }

      html.app-ready-to-reveal #root {
        visibility: visible;
        opacity: 0;
        transform: none;
        filter: none;
      }

      html.app-ready-to-reveal.app-warm-start #root {
        opacity: 0;
        transform: none;
        filter: none;
      }

      html.app-loaded #root {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        filter: none;
      }

      /* The previous `mail-iseng-home-handoff-in` keyframe + the
       * `html.app-loaded.route-home-initial .public-route-frame-home …`
       * animation rule have been removed. The page-level entry
       * animations in `home.css` (landing-fade-up / landing-fade-down
       * 480–620 ms) are now the single source of truth for the home
       * reveal. The boot loader's job is to gate the root, not to
       * animate the page underneath. Stacking the two produced a
       * visible "pop" on fresh refresh where the home elements
       * snapped back to opacity 0 right after the loader hid. */

      /* === Transitions === */

      html.app-loading #root,
      html.app-ready-to-reveal #root,
      html.app-loaded #root {
        transition:
          opacity 420ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity;
      }

      html.app-loading.app-warm-start #root,
      html.app-ready-to-reveal.app-warm-start #root,
      html.app-loaded.app-warm-start #root {
        transition:
          opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      html.app-loading #mail-iseng-boot-loader,
      html.app-loaded #mail-iseng-boot-loader {
        transition:
          opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      html.app-loading.app-warm-start #mail-iseng-boot-loader,
      html.app-loaded.app-warm-start #mail-iseng-boot-loader {
        transition:
          opacity 140ms ease;
      }

      html.app-loaded .mail-iseng-boot-indicator {
        opacity: 0;
        transform: none;
        filter: none;
        transition:
          opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      html.app-loaded #mail-iseng-boot-loader::before,
      html.app-loaded #mail-iseng-boot-loader::after {
        opacity: 0;
        transition:
          opacity 180ms ease;
      }

      html.app-warm-start .mail-iseng-boot-indicator {
        transform: translate3d(0, 0, 0) scale(0.985);
        opacity: 0.82;
      }

      html.app-loaded.app-warm-start .mail-iseng-boot-indicator {
        opacity: 0;
        transform: none;
        filter: none;
        transition:
          opacity 120ms ease;
      }

      /* === Reduced Motion === */

      @media (prefers-reduced-motion: reduce) {

        html.app-loading #root,
        html.app-ready-to-reveal #root,
        html.app-loaded #root,
        html.app-loaded #mail-iseng-boot-loader,
        html.app-loaded.route-home-initial .public-route-frame-home,
        html.app-loaded.route-home-initial .home-page-shell,
        html.app-loaded.route-home-initial .home-landing-panel,
        html.app-loaded.route-home-initial .home-feature-grid,
        html.app-loaded.route-home-initial .home-footer {
          animation: none !important;
          transition: none !important;
        }

        html.app-loading #root,
        html.app-ready-to-reveal #root,
        html.app-loaded #root {
          transform: none !important;
          filter: none !important;
        }

        .mail-iseng-boot-progress {
          animation: none !important;
        }

        #mail-iseng-boot-loader::before,
        #mail-iseng-boot-loader::after {
          transition: none !important;
        }
      }

      /* === Hide prerender shells === */

      #mail-iseng-home-shell,
      [data-mail-iseng-home-prerender],
      .mail-iseng-home-prerender,
      .home-prerender-shell,
      .home-prerender-topbar,
      .home-prerender-body,
      .home-prerender-footer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }